@import "../../variables.scss";

// Header position has to fixed as the user scrolls to the right. Because of a limitation in react-beautiful-dnd library
// the drag-drop context can only have one scroll container so the entire board has to be scrolled. Therefore,
// header has to be part of the page that is being scrolled and as a workaround we use position:fixed.
header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 5px;
  background: #555;
  z-index: 2;
  transition: background 0.3s;
}

.green header {
  background: $transparent-green;
}
.blue header {
  background: $transparent-blue;
}
.red header {
  background: $transparent-red;
}
.pink header {
  background: $transparent-pink;
}

.header-title {
  display: inline-flex;
  align-items: center;
  color: white;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}

.header-title img {
  height: 30px;
}

.header-right-side {
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  color: white;
}

.user-thumbnail {
  height: 28px;
  border-radius: 3px;
}

.guest-icon {
  padding-top: 2px;
  font-size: 24px;
}

.signout-link {
  padding: 3px 5px 1px 5px;
  margin-left: 12px;
  border: 1px solid $transparent-black;
  border-radius: 3px;
  color: white;
  background: $transparent-black;
  text-decoration: none;
}

.signout-link:focus,
.signout-link:hover {
  background: $less-transparent-black;
}

.signout-icon {
  padding-bottom: 2px;
  font-size: 22px;
}

// Some things have to be removed for mobile layouts to avoid overflowing
@media (max-width: 700px) {
  .user-thumbnail,
  .guest-icon {
    display: none;
  }

  .signout-link {
    margin-left: 0px;
  }
}
